<template>
  <div class="page-view">
    <div v-if="!isShowCrop">
      <div class="header">
        <!-- <van-uploader
          accept="image/*"
          :max-size="3145728"
          :after-read="onRead"
          @oversize="overSize"
        >
          <Avatar :src="userInfo.HeadPhoto" />
        </van-uploader> -->
        <Avatar :src="userInfo.HeadPhoto" />
        <div>
          <h2 class="name">
            {{ userRealName || '' }}
          </h2>
        </div>
      </div>
      <ul class="my-entry-list">
        <!-- <router-link
          class="my-entry"
          :to="{name: 'changeSex'}"
          tag="li"
        >
          <span class="entry-name">
            性别
          </span>
          <span
            class="entry-info"
          >
            {{ userInfo.Sex === 1 ? '女' : '男' }}
          </span>
          <van-icon name="arrow" />
        </router-link> -->
        <!-- <li
          class="my-entry"
          @click="isShowDatePicker = true;"
        >
          <span class="entry-name">
            出生日期
          </span>
          <span class="entry-info">
            {{ $store.state.userInfo.Birthday }}
          </span>
          <van-icon name="arrow" />
        </li> -->
        <van-popup
          v-model="isShowDatePicker"
          position="bottom"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="mindate"
            :max-date="maxdate"
            :formatter="formatter"
            @cancel="isShowDatePicker = false"
            @confirm="onBirthdayConfirm"
          />
        </van-popup>
      </ul>
      <ul class="my-entry-list">
        <router-link
          class="my-entry"
          :to="{name: 'changePhone'}"
          tag="li"
        >
          <span class="entry-name">
            手机号码
          </span>
          <span class="entry-info">
            {{ userPhone }}
          </span>
          <van-icon name="arrow" />
        </router-link>
        <router-link
          class="my-entry"
          :to="{name: 'changeCardNo'}"
          tag="li"
        >
          <span class="entry-name">
            身份证号
          </span>
          <span class="entry-info">
            {{ userInfo.CardNo }}
          </span>
          <van-icon name="arrow" />
        </router-link>
        <!-- <router-link
          class="my-entry"
          :to="{name: 'changePwd'}"
          tag="li"
        >
          <span class="entry-name">
            修改密码
          </span>
          <van-icon name="arrow" />
        </router-link> -->
      </ul>
      <!-- <ul class="my-entry-list">
        <router-link
          class="my-entry"
          :to="{name: 'myMoreInfo'}"
          tag="li"
        >
          <span class="entry-name">
            更多信息
          </span>
          <van-icon name="arrow" />
        </router-link>
      </ul> -->
    </div>
    <div v-if="isShowCrop">
      <CropImage
        :img-data="headImgFile"
        @isCropFinished="onShowCrop"
      />
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapState } from 'vuex'
import { DatetimePicker, Uploader } from 'vant'
import { SET_USER_INFO } from '@/store/mutations'
import userInfo from '@/store/modules/userInfo'
export default Vue.extend({
  components: {
    // 'van-uploader': Uploader,
    'van-datetime-picker': DatetimePicker,
    CropImage: () => import('components/Mine/UploadPicture.vue'),
    Avatar: () => import(/* webpackChunkName: "publicComp" */ 'components/Mine/Avatar.vue'),
  },
  data () {
    let Mobile = this.$store.state.userInfo.MobilePhone
    let realName = this.$store.state.userInfo.UserName
    return {
      headImgFile: '', // 上传图片的文件
      isShowCrop: false, // 是否显示裁剪层
      isShowDatePicker: false, // 是否显示日期popup
      userRealName: realName.length > 10 ? realName.substring(0, 10) + '...' : realName,
      userPhone: Mobile.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3'),
    }
  },
  computed: mapState(['userInfo']),
  created () {
    this.getUserInformation()
  },
  methods: {
    getUserInformation () {
      this.$axios({
        method: 'get',
        url: 'user/GetCurrenUser',
      }).then(res => {
        this.$store.commit(SET_USER_INFO, {
          HeadPhoto: res.HeadPhoto,
          MobilePhone: res.MobilePhone,
          RealName: res.RealName,
          CardNo: res.CardNo,
          //       "Token": "string",
          // "UserName": "string",
          // "HeadPhoto": "string",
          // "Position": "string",
          // "MobilePhone": "string",
          // "Email": "string",
          // "Remark": "string",
          // "CardNo": "string"
        })
      })
    },
    overSize () {
      this.$toast('请上传大小不超过3M的图片！')
    },
    onRead (file: any) {
      this.headImgFile = file.content
      this.isShowCrop = true
    },
    onShowCrop (val: any) {
      this.isShowCrop = val
      if (val) {
        this.isShowCrop = false
        this.$toast('更新成功！')
      }
    },
    onChgRealName () {
      let realName = this.userInfo.RealName
      if (!realName) {
        this.$router.push({ name: 'changeRealName' })
      }
    },
    formatter (type : any, value : any) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 提交生日日期
    onBirthdayConfirm (value : any) {
      let userAge = new Date().getFullYear() - value.getFullYear()
      this.$axios({
        url: 'Setting/UpdateUserInfo',
        data: {
          Type: 5,
          Content: value,
        },
      }).then(res => {
        this.$store.commit(SET_USER_INFO, { Birthday: this.getBirthdayStr(value), Age: userAge })
        this.$toast('更新成功！')
      })
      this.isShowDatePicker = false
    },
    // 拼接时间字符串
    getBirthdayStr (value: any) {
      const years = value.getFullYear()
      const monthTime = value.getMonth() + 1
      const months = monthTime < 10 ? '0' + monthTime : monthTime
      const dayTime = value.getDate()
      const days = dayTime < 10 ? '0' + dayTime : dayTime
      return years + '-' + months + '-' + days
    },
  },
})
</script>

<style lang="scss" scoped>
.header {
  text-align: center;
  height: 290px;
  background: url('~assets/mine/myInfo-bg.png') 50% 50%/cover;
  color: #fff;
  padding-top: 30px;
}
.name {
  display: block;
  font-size: 34px;
  padding-top: 23px;
}
.my-entry-list {
  background: #fff;
  padding-left: 40px;
  + .my-entry-list {
    margin-top: 10px;
  }
}
.my-entry {
  display: flex;
  align-items: center;
  padding-right: 36px;
  height: 109px;
  color: #333;
  + .my-entry {
    // border-top: 1px solid #e1e1e1;
    @include px1border(top, #e1e1e1)
  }
  .van-icon-arrow {
    font-size: 24px;
  }
}
.entry-name {
  flex: 1;
  font-size: 30px;
}
.entry-info {
  font-size: 30px;
  padding-right: 20px;
}
</style>
